@import '../node_modules/ant-design-vue/es/style/themes/default.less';

#chart-card {
  @gap: 20px;
  @bgcolor: #fff;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  &>div {
    width: 100%;
  }

  &>div>div {
    width: 100%;
    height: 100%;
    background-color: @bgcolor;
    border-radius: 5px;
    padding: @gap;
  }

  .s-box {
    display: flex;
    flex-direction: column;
    gap: @gap;
  }

  .s-width {
    width: 554px;
  }

  .b-width {
    width: calc(100% - 554px - @gap);
  }

  .s-height {
    height: calc(45vh - 62px);
  }

  .b-height {
    height: calc(55vh - 80px);
  }

  .ss-height {
    height: calc((55vh - 62px - @gap));
  }

  .circle-statistics {
    display: flex;
    height: 100%;
    flex-wrap: wrap;

    div {
      width: 50%;
      height: 50%;
      margin: 0 auto;
    }
  }
}

@media screen and (max-width:1366px) {
  #chart-card {
    .s-width{
      width: 100%;
    }
    .b-width{
      width: 100%;
    }
    .circle-statistics{
      div{
        width: 25%;
        height: 100%;
      }
    }
    .info-height{
      height: 210px;
    }
  }
}
@media screen and (max-width:1024px) {
  #chart-card {
    .circle-statistics{
      div{
        width: 50%;
        height: 50%;
      }
    }
    .info-height{
      height: 400px;
    }
  }
}
